<template>
  <div>
    <div class="title-infomation">
      <h2>学期管理</h2>
    </div>
    <!-- 功能区 -->
    <div class="table-allinfomation">
      <div id="table-info">
        <!-- 条件搜索 -->
        <div class="top-infomation">
          <el-row>
            <el-col :span="10">
              <div class="addUser">
                当前开放学期为：{{ nowSemster.semName }}
                <el-button v-if="nowSemster.semName !== '当前无开放学期'" class="el-top-all-button" type="text" @click="showUpdateSemester(nowSemster)">修改信息</el-button>
                <el-button v-if="nowSemster.semName !== '当前无开放学期'" class="el-top-all-button" type="text" @click="closeSemester(nowSemster)"><p style="color:#e74c3c">关闭学期</p></el-button>
              </div>
            </el-col>
            <el-col :span="14">
              <div class="search-info">
                <!-- 显示当前开放学期 -->
                <el-button type="primary" @click="showAddSemester()">添加学期</el-button>
              </div>
            </el-col>
          </el-row>
        <!-- 搜索按钮 -->
        </div>
        <!-- 表单展示 -->
        <el-table
          v-loading="loading"
          :data="semester.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          stripe
          fit
          highlight-current-row
          class="table-infomation"
          :default-sort="{prop: 'sendScore', order: 'ascending'}"
        >
          <el-table-column
            label="序号"
            type="index"
            min-width="10%"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="semName"
            label="学期名称"
            sortable
            :sort-orders="sortOrders"
            min-width="10%"
          />
          <el-table-column
            align="center"
            label="审核时间"
            min-width="15%"
          >
            <template slot-scope="scope">
              {{ scope.row.semCheckStartTime }} 至 {{ scope.row.semCheckStopTime }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="开放时间"
            min-width="15%"
          >
            <template slot-scope="scope">
              {{ scope.row.semSendStartTime }} 至 {{ scope.row.semSendStopTime }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="当前状态"
            min-width="10%"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.semStatus === 1" type="info">非当前学期</el-tag>
              <el-tag v-if="scope.row.semStatus === 0" type="success">当前学期</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="详情"
            min-width="10%"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="showUpdateSemester(scope.row)">更新</el-button>
              <el-button type="text" @click="delSemester(scope.row)"><p style="color:#e74c3c">删除</p></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页功能 -->
        <div id="pages" class="paging-info">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[5,10,15,20,30]"
            :page-size="pagesize"
            layout="total , sizes , prev , pager , next"
            :total="semester.length"
            prev-text="上一页"
            next-text="下一页"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>

      </div>
    </div>
    <!-- 更新学期信息 -->
    <update-semester ref="updateSemesterInfo" />
    <!-- 删除学期信息 -->
  </div>
</template>
<script>
import { getAllSemester, findNowSemester, findOpenSemester, updateSemester, delSemester } from '../../api/semester.js'
import updateSemesterInfo from '../../components/updateSemesterInfo/updateSemesterInfo.vue'
export default {
  components: {
    'update-semester': updateSemesterInfo
  },
  data() {
    return {
      // 页面数据存储位置
      semester: [],
      nowSemster: {},
      openSemTotal: 0, // 学期开放数量
      // 代码数据存储位置
      loading: true,
      currentPage: 1, // 默认显示页面为1
      pagesize: 15, // 每页的数据条数
      sortOrders: [
        'ascending', 'descending'
      ],
      isShowSemesterInfo: false,
      sendInfoStatus: 0 // 提交状态：0未设置，1添加，2修改，3删除
    }
  },
  created() {
    //   获取全部学期信息
    this.getAllSemester()
  },
  methods: {
    // 获取全部学期信息
    getAllSemester() {
      var that = this
      getAllSemester().then((res) => {
        that.semester = res.obj
        that.getNowSemester()
        that.findIsNowSemester()
      })
    },
    // 查看当前学期
    getNowSemester() {
      var that = this
      findNowSemester().then((res) => {
        if (res.obj === null) {
          that.nowSemster.semName = '当前无开放学期'
        } else {
          that.nowSemster = res.obj
        }
        that.loading = false
      })
    },
    // 查看学期开启数量
    findIsNowSemester() {
      findOpenSemester().then((res) => {
        this.openSemTotal = res.obj
      })
    },
    // 关闭当前学期
    closeSemester(semester) {
      this.$confirm('是否关闭当前学期，关闭后所有人将无法登陆，点击确定后关闭。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        semester.semStatus = 1
        updateSemester(semester).then((res) => {
          this.$message({
            type: 'success',
            message: '关闭成功'
          })
          setTimeout(() => {
            location.reload()
          }, 300)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 删除当前学期
    delSemester(semester) {
      var that = this
      that.$confirm('建议不要删除，删除后无法撤销，此学期内的所有信息将无法恢复，请确认是否删除。点击确认后删除', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        semester.semStatus = 1
        delSemester(semester.semId).then((res) => {
          that.$message({
            type: 'success',
            message: '删除成功'
          })
          setTimeout(() => {
            location.reload()
          }, 300)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 页面逻辑方法
    // 展示添加学期信息
    showAddSemester() {
      this.$refs.updateSemesterInfo.showDialog(0, 1, this.openSemTotal)
    },
    // 展示修改学期信息
    showUpdateSemester(semester) {
      this.$refs.updateSemesterInfo.showDialog(semester, 2, this.openSemTotal)
    },

    // 分页信息
    handleSizeChange(size) {
      this.pagesize = size
    },
    // 点击第几页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
    },
    handleClick(row) {
    }

  }
}
</script>
<style lang="scss">
#main{
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10rem;
}
#table-area{
  margin-left: 0.8rem;
  margin-right: 0.8rem;
}
.title-infomation{
  margin-top:3rem;
  margin-left: 4rem;
}
.table-info{
  margin-left: 7rem;
  margin-right: 10rem;
}
.table-infomation{
  width: 100rem;
}
.paging-info{
    margin-top: 2rem;
}
.reset-userType{
    margin-top: 2rem;
}
.search-info{
    display: flex;
  margin-top:3rem;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
  margin-right: 3rem;
}
.addUser{
  margin-top:3rem;
  margin-bottom: 1.5rem;
}
.table-allinfomation{
  margin-left: 7rem;
  margin-right: 5rem;
}
.el-top-all-button{
    margin-left: 1rem;
}
</style>
